<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    @media only screen and (-webkit-min-device-pixel-ratio: 1.0) {
        #foo { background-color: red; }
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.1) {
        #foo { background-color: blue; }
    }
</style>
<div id=foo></div>
<script>
    if (window.testRunner)
        testRunner.zoomPageIn();
    test(function() {
        var div = document.getElementById("foo");
        var computedStyle = window.getComputedStyle(div, null);
        assert_equals(computedStyle.getPropertyValue('background-color'),
                      'rgb(0, 0, 255)');
    }, "media query with zoom");
</script>
